<!DOCTYPE html>
<html
  layout:decorator="components/layout"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  lang="zh-CN"
>
<head>
  <title>客户管理</title>
  <style>
    .btn-center {
      display: block;
      margin: 0 auto;
      float: none;
    }
  </style>
</head>
<body>
<div
  layout:fragment="content"
  class="container"
  id="app" v-cloak
>
  <div class="myTabs">
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="客户数据信息" name="first">
        <div class="myHeader">
          <div class="myHeader-title">
            {{baseCustomer.unitName}} 的客户信息
          </div>
        </div>
        <table
          width="100%"
          border="0"
          class="el-table el-table--border"
          cellspacing="0"
          cellpadding="0"
        >
          <tbody>
          <tr>
            <td
              width="200"
            >客户编号
            </td>
            <td>{{baseCustomer.id}}</td>
          </tr>
          <tr>
            <td
              width="200"
            >单位名称(客户名称)
            </td>
            <td>{{baseCustomer.unitName}}</td>
          </tr>
          <tr>
            <td>用户类型</td>
            <td>{{baseCustomer.userTypeStr}}</td>
          </tr>
          <tr>
            <td>单位属性</td>
            <td>
              {{baseCustomer.unitNatureStr}}
            </td>
          </tr>
          <tr>
            <td>证件类型</td>
            <td>
              {{baseCustomer.idTypeStr}}
            </td>
          </tr>
          <tr>
            <td>证件号码</td>
            <td>{{baseCustomer.idNumber}}</td>
          </tr>
          <tr>
            <td>单位地址</td>
            <td>{{baseCustomer.address}}</td>
          </tr>
          <tr>
            <td>邮政编码</td>
            <td>{{baseCustomer.zipCode}}</td>
          </tr>
          <tr>
            <td>安全责任人</td>
            <td>{{baseCustomer.officerName}}</td>
          </tr>
          <tr>
            <td>服务开通时间</td>
            <td>{{baseCustomer.serviceRegTime}}</td>
          </tr>
          </tbody>
        </table>
      </el-tab-pane>
      <el-tab-pane label="应用服务信息" name="second" v-if="baseCustomer.userType === 1">
        <section v-if="baseHousesHoldInfoList.length === 0">
          <el-button
            type="primary"
            @click="addBaseServiceInfo"
          >新增服务
          </el-button>
        </section>
        <section v-for="baseHousesHoldInfo in baseHousesHoldInfoList">
          <div class="myHeader">
            <div class="myHeader-title">
              {{baseCustomer.unitName}}的应用服务信息
            </div>
            <div class="myHeader-tool">
              <el-button
                type="primary"
                v-if="baseCustomer.reportStatus !== 1"
                @click="addBaseServiceInfo"
              >新增服务
              </el-button>
              <el-button
                type="primary"
                v-if="baseCustomer.reportStatus !== 1"
                @click="updateBaseServiceInfo(baseHousesHoldInfo)"
              >修改服务
              </el-button>
              <el-button
                type="danger"
                v-if="baseHousesHoldInfoList.length > 1 && baseCustomer.reportStatus !== 1"
                @click="deleteBaseServiceInfo(baseHousesHoldInfo)"
              >删除服务
              </el-button>
            </div>
          </div>
          <table
            width="100%"
            border="0"
            class="el-table el-table--border"
            cellspacing="0"
            cellpadding="0"
          >
            <tbody>
            <tr>
              <td
                width="200"
              >所在机房
              </td>
              <td
                width="400"
              >
                {{baseHousesHoldInfo.houseName}}
              </td>
              <td
                width="200"
              >所在机房机架
              </td>
              <td>{{baseHousesHoldInfo.baseFrameInfo.frameName}}</td>
            </tr>
            <tr>
              <td>网络带宽</td>
              <td>{{baseHousesHoldInfo.bandWidth}}Mbps</td>
              <td>资源分配时间</td>
              <td>{{baseHousesHoldInfo.distributeTimeStr}}
              </td>
            </tr>
            <tr>
              <td>服务内容</td>
              <td>
                <span v-for="serviceContent of baseHousesHoldInfo.serviceContentSet">{{serviceContent}}<br/></span>
              </td>
              <td>接入方式</td>
              <td>{{baseHousesHoldInfo.setModeStr}}
              </td>
            </tr>
            <tr>
              <td>备案类型</td>
              <td>{{baseHousesHoldInfo.regTypeStr}}</td>
              <td>备案号或许可证号</td>
              <td>{{baseHousesHoldInfo.regId}}</td>
            </tr>
            <tr>
              <td>域名信息</td>
              <td>
                <a
                  v-for="{domain} in baseHousesHoldInfo.baseServiceDomainList"
                  :href="`http://${domain}`"
                  :key="domain"
                  target="_blank"
                >{{domain}}<br/></a>
              </td>
              <td> 业务类型</td>
              <td>{{baseHousesHoldInfo.businessTypeStr}}
              </td>
            </tr>
            <tr>
              <td>所在地</td>
              <td>{{baseHousesHoldInfo.location}}</td>
            </tr>
            <tr>
              <td>IP地址转换信息</td>
              <td
                colspan="3"
              >
                <table
                  border="0"
                  class="el-table el-table--border"
                  width="100%"
                >
                  <thead>
                  <tr>
                    <td>起始IP地址</td>
                    <td>终止IP地址</td>
                    <td>私网起始IP</td>
                    <td
                      width="60%"
                    >私网终止IP
                    </td>
                  </tr>
                  </thead>
                  <tbody>
                  <tr
                    v-for="baseIpTransInfo in baseHousesHoldInfo.baseIpTransInfoList"
                    :key="baseIpTransInfo.id"
                  >
                    <td>
                      <input
                        type="hidden"
                        name="iptransId[]"
                        value="45"
                      >{{baseIpTransInfo.internetStartIp}}
                    </td>
                    <td>{{baseIpTransInfo.internetEndIp}}</td>
                    <td>{{baseIpTransInfo.privateStartIp}}</td>
                    <td>{{baseIpTransInfo.privateEndIp}}</td>
                  </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            </tbody>
          </table>
        </section>
      </el-tab-pane>
      <el-tab-pane label="占用机房信息" name="third"  v-if="baseCustomer.userType === 2">

        <section v-if="baseHousesHoldInfoList.length === 0">
          <el-button
            type="primary"
            @click="addBaseServiceInfo"
          >新增占用机房
          </el-button>
        </section>
        <section v-for="baseHousesHoldInfo in baseHousesHoldInfoList">
          <div class="myHeader">
            <div class="myHeader-title">
              {{baseCustomer.unitName}}的占用机房信息
            </div>
            <div class="myHeader-tool">
              <el-button
                type="primary"
                v-if="baseCustomer.reportStatus !== 1"
                @click="addBaseServiceInfo"
              >新增占用机房
              </el-button>
              <el-button
                type="primary"
                v-if="baseCustomer.reportStatus !== 1"
                @click="updateBaseServiceInfo(baseHousesHoldInfo)"
              >修改占用机房
              </el-button>
              <el-button
                type="danger"
                v-if="baseHousesHoldInfoList.length > 1 && baseCustomer.reportStatus !== 1"
                @click="deleteBaseServiceInfo(baseHousesHoldInfo)"
              >删除占用机房
              </el-button>
            </div>
          </div>
          <table
            width="100%"
            border="0"
            class="el-table el-table--border"
            cellspacing="0"
            cellpadding="0"
          >
            <tbody>
            <tr>
              <td
                width="200"
              >所在机房
              </td>
              <td
                width="400"
              >
                {{baseHousesHoldInfo.houseName}}
              </td>
              <td
                width="200"
              >所在机房机架
              </td>
              <td>{{baseHousesHoldInfo.baseFrameInfo.frameName}}</td>
            </tr>
            <tr>
              <td>网络带宽</td>
              <td>{{baseHousesHoldInfo.bandWidth}}Mbps</td>
              <td>资源分配时间</td>
              <td>{{baseHousesHoldInfo.distributeTimeStr}}
              </td>
            </tr>
            <tr v-if="false">
              <td>服务内容</td>
              <td>
                <span v-for="serviceContent in baseHousesHoldInfo.serviceContentSet">{{serviceContent}}<br/></span>
              </td>
              <td>接入方式</td>
              <td>{{baseHousesHoldInfo.setModeStr}}
              </td>
            </tr>
            <tr v-if="false">
              <td>备案类型</td>
              <td>{{baseHousesHoldInfo.regTypeStr}}</td>
              <td>备案号或许可证号</td>
              <td>{{baseHousesHoldInfo.regId}}
              </td>
            </tr>
            <tr v-if="false">
              <td>域名信息</td>
              <td>
                <a
                  v-for="{domain} in baseHousesHoldInfo.baseServiceDomainList"
                  :href="`http://${domain}`"
                  :key="domain"
                  target="_blank"
                >{{domain}}<br/></a>
              </td>
              <td> 业务类型</td>
              <td>{{baseHousesHoldInfo.businessTypeStr}}
              </td>
            </tr>
            <tr>
              <td>IP地址转换信息</td>
              <td
                colspan="3"
              >
                <table
                  id="frm_ip"
                  border="0"
                  class="el-table el-table--border"
                  width="100%"
                >
                  <thead>
                  <tr v-if="baseCustomer.userType === 1">
                    <td>起始IP地址</td>
                    <td>终止IP地址</td>
                    <td>私网起始IP</td>
                    <td
                      width="62.5%"
                    >私网终止IP
                    </td>
                  </tr>
                  <tr v-if="baseCustomer.userType === 2">
                    <td>起始IP地址</td>
                    <td width="87.5%">终止IP地址</td>
                  </tr>
                  </thead>
                  <tbody>
                  <tr
                    v-for="baseIpTransInfo in baseHousesHoldInfo.baseIpTransInfoList"
                    :key="baseIpTransInfo.id"
                  >
                    <td>
                      <input
                        type="hidden"
                        name="iptransId[]"
                        value="45"
                      >{{baseIpTransInfo.internetStartIp}}
                    </td>
                    <td>{{baseIpTransInfo.internetEndIp}}</td>
                    <td v-if="baseCustomer.userType === 1">{{baseIpTransInfo.privateStartIp}}</td>
                    <td v-if="baseCustomer.userType === 1">{{baseIpTransInfo.privateEndIp}}</td>
                  </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            </tbody>
          </table>
        </section>
      </el-tab-pane>
    </el-tabs>
  </div>
</div>
<div
  layout:fragment="js"
>
  <script src="/static/js/module/basic-data/model/BaseCustomer.js"></script>
  <script src="/static/js/module/basic-data/model/BaseHousesHoldInfo.js"></script>
  <script src="/static/js/module/basic-data/api/baseCustomerApi.js"></script>
  <script src="/static/js/module/basic-data/api/baseHouseInfoApi.js"></script>
  <script src="/static/js/module/basic-data/api/baseHousesHoldInfoApi.js"></script>
  <script src="/static/js/module/basic-data/see/admin_user_info_see.js"></script>
</div>
</body>
</html>
